<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>div+css布局处理</title>
		<style>
			
			/**清除body的外边距margin和内边距padding*/
			
			body {
				margin: 0px;
				padding: 0px;
			}
			
			/**div中文本格式*/
			/*div {
				font: bold 32px 隶书;
				color: red;
				text-align: center;
				text-decoration: underline;
			}*/
			
			/*总的显示区域的宽度*/
			#container {
				/*使用margin左右两部分自动处理，达到一个居中效果*/
				/*margin:0px auto;*/
				/*margin-left:auto ;
				margin-right: auto;*/
				width: 80%;
				height: 800px;
				padding: 5px;
			}
			
			#header {
				width: 100%;/*百分比分割*/
				height: 80px;
				background: #DDDDDD;
			}
			
			#content {
				width: 100%;
				height: 600px;				
				background: #BBBBBB;
			}			
			#cLeft{
				float: left;
				width: 30%;
				height: 600px;
				background: #F8F8FF;
			}
			#cRight{
				float: left;
				width: 70%;
				height: 600px;
				background:#5A98C3;
			}
			#footer {
				width: 100%;
				height: 80px;
				background-color: #FFFF00;
			}
			
		</style>
	</head>

	<body>
		<!---总区域div-->
		<div id="container">
			<!--子区域划分--->
			<div id="header">header</div>
			<div id="content">
				<div id="cLeft">Left</div>
				<div id="cRight">
					<!--图片文字区域第一行-->
					<div style="clear:both;width: 100%;height: 230px;">
						<!---图片区域--->
						<div style="margin:3px;float: left;width: 15%;">
							<img src="imgs/headfirst.jpg"/>
						</div>
						<!---文字区域--->
						<div  style="float: left;width: 83%;">
							<p style="padding-left:40px;width: 90%; height: 90%;">
							第14届Jolt大奖的参赛图书。
							《HeadFirstJava》使纸质图书成为了你所见过的*接近GUI的事物，使学习Java成为一种风尚。
						   </p>
						</div>
					</div>
					<!--图片文字区域第一行-->
					<div style="clear:both;width: 100%;height: 230px;">
						<!---图片区域--->
						<div style="margin:3px;float: left;width: 15%;">
							<img src="imgs/headfirst.jpg"/>
						</div>
						<!---文字区域--->
						<div  style="float: left;width: 83%;">
							<p style="padding-left:40px;width: 90%; height: 90%;">
							第14届Jolt大奖的参赛图书。
							《HeadFirstJava》使纸质图书成为了你所见过的*接近GUI的事物，使学习Java成为一种风尚。
						   </p>
						</div>
					</div>					
				</div>
			</div>
			<div id="footer">footer</div>
		</div>
	</body>

</html>